import React, { Component } from 'react'
import { NavBar } from "antd-mobile"
import img from "../../assest/empty.jpg"
import "./cart.scss"

export default class Cart extends Component {
  state = {
    carts: []
  }
  componentDidMount() {
    let carts_str = localStorage.getItem("carts")
    let carts = JSON.parse(carts_str || "[]")
    this.setState({
      carts
    })
  }


  render() {
    return (
      <div className="yg-cart">
        {/* 购物车导航开始 */}
        <NavBar mode="light"
          className="cart-nav"
        >优购商城</NavBar>
        {/* 购物车导航结束 */}
        {/* 渲染购物车内容开始 */}
        <div className="yg-contener">
          {
            !!this.state.carts.length ?
              (<div className="cart-content-list">
                {this.state.carts.map((val) => {
                  return (
                    <div className="content-list-item" key={val.goods_id}>
                      <div className="list-item-left">
                        <i className="iconfont icon-shanchu-xuanzhong"></i>
                      </div>
                      <div className="list-item-mid">
                        <img src={val.goods_small_logo} alt="" />
                      </div>
                      <div className="list-item-right">
                        <div className="right-top">
                          <div className="right-top-title">{val.goods_name}</div>
                        </div>
                        <div className="right-bottom">
                          <div className="right-bottom-left">￥{val.goods_price}</div>
                          <div className="right-bottom-right">
                            <i className="iconfont icon-iconset0187"></i>
                            <span className="num">{val.num}</span>
                            <i className="iconfont icon-icon-"></i>
                          </div>
                        </div>
                      </div>
                    </div>

                  )
                })}
                <div className="carts-total">
                  <div className="carts-left">
                    <i className="circle"></i>
                    <span className="quanxuan">全选</span>
                    <span className="text1">合计：</span>
                    <span className="price">￥63773</span>
                  </div>
                  <div className="carts-right">
                    <span className="text3">去结算(1)</span>
                  </div>
                </div>
              </div>)
              : (<div className="empty">
                <img src={img} alt="" />
                <h3 className="empty-text"><a href="#/category">请前往商城添加商品</a></h3>
              </div>)
          }
        </div>
        {/* 渲染购物车内容结束 */}
      </div >
    )
  }
}
